<template>
  <div class="app-2KdnP_1">
    <section class="app-3rytA_1">
      <svg aria-label="返回按钮" @click="_backToHome" role="button" class="app-21LS3_1">
        <use xlink:href="#arrow">
          #shadow-root (closed)
            <svg viewBox="0 0 20 32" id="arrow" width="100%" height="100%">
              <path d="M16.552 5.633l-2.044-2.044L2.243 15.854l12.265 12.557 2.044-2.044L6.331 15.854z">
              </path>
            </svg>
        </use>
      </svg>
      <form class="app-iYo7n_1">
        <!--<svg aria-hidden="true" class="app-2kCc4_1">-->
          <!--<use xlink:href="#search">-->
            <!--shadow-root (closed)-->
            <!--<svg viewBox="0 0 12 12" id="search" width="100%" height="100%">-->
              <!--<g fill="none" fill-rule="evenodd">-->
                <!--<path fill="#F5F5F5" d="M-179-10h375v805h-375z"></path>\-->
                <!--<path fill="#FFF" d="M-179 0h375v22h-375z"></path>-->
                <!--<text font-family="PingFangSC-Regular, PingFang SC" font-size="11" transform="translate(-179)"><tspan x="179.5" y="16" fill="#333">黄焖鸡</tspan> <tspan x="212.5" y="16" fill="#999">标准份</tspan></text>-->
                <!--<text font-family="PingFangSC-Regular, PingFang SC" font-size="11" transform="translate(-179)">-->
                  <!--<tspan x="179.5" y="16" fill="#333">-->
                    <!--黄焖鸡-->
                  <!--</tspan>-->
                  <!--<tspan x="212.5" y="16" fill="#999">-->
                    <!--标准份-->
                  <!--</tspan>-->
                <!--</text>-->
                <!--<g>-->
                  <!--<path fill="#FFF" d="M-179-11h375v44h-375z"></path>-->
                  <!--<path fill="#F5F5F5" d="M-167-3h351a2 2 0 0 1 2 2v24a2 2 0 0 1-2 2h-351a2 2 0 0 1-2-2V-1a2 2 0 0 1 2-2z"></path>-->

                  <!--<path fill="#999" fill-rule="nonzero"-->
                        <!--d="M11.255 5.338C11.11 2.475 8.787.152 5.924.008A5.632 5.632 0-->
                        <!--0 0 .008 5.926c.145 2.845 2.44 5.158 5.284 5.325a5.636 5.636 0-->
                        <!--0 0 2.24-.319.507.507 0 1 0-.342-.954 4.622 4.622 0 0-->
                        <!--1-1.839.261c-2.327-.137-4.211-2.036-4.33-4.365A4.618-->
                        <!--4.618 0 0 1 5.871 1.02c2.344.119 4.251 2.026 4.37-->
                        <!--4.37a4.602 4.602 0 0 1-1.275 3.434.62.62 0 0 0 .007.866l2.16-->
                        <!--2.16a.507.507 0 1 0 .718-.716L9.956 9.238a5.615 5.615 0 0 0 1.3-3.9z">-->
                  <!--</path>-->
                <!--</g>-->
              <!--</g>-->
            <!--</svg>-->
          <!--</use>-->
        <!--</svg>-->
        <input type="search" v-model="key" placeholder="输入商家、商品名称" class="app-11zxJ_1">
        <button type="submit" class="app-3q7ve_1" @click="_searchProduct">搜索</button>
      </form>
    </section>
    <restaurant-filter></restaurant-filter>
    <div>
      <div class="app-3GmD-_1" style="padding-bottom: 0px;">
        <div style="display: none">
        </div>
        <div class="shop-3SsDF" :keyword="key" v-show="key != ''">
          <div></div>
          <div class="shop-3XmEa">
            <div v-for="rest in restaurants">
              <restaurant-list :rest="rest.restaurant"></restaurant-list>
            </div>
            <infinite-loading @infinite="_loadNewData">
              <span slot="no-more" style="color: #ccc;">
                没有更多数据了...
              </span>
            </infinite-loading>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import {mapGetters} from 'vuex'
  import InfiniteLoading from 'vue-infinite-loading'

  import {searchProduct } from "api/search/product-search";
  import restaurantList from "components/common/restaurant-list"
  import restaurantFilter from "components/common/restaurant-filter"

  export default {
      name: "search",
      components:{
          'restaurant-list': restaurantList,
        InfiniteLoading,
        'restaurant-filter':restaurantFilter
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          restaurants: [],
          key:'',
          offset: 0
        }
      },
      created(){
        this._searchProduct();
      },
      computed: {
        ...mapGetters({
          addressInfo:'getAddressInfo',
          orderBy:'getOrderBy'
        })
      },
      watch:{
        orderBy(){
          this._searchProduct();
        },
        key(){
          this._searchProduct();
        }
      },
      methods:{
        _searchProduct(){
          if(this.key != "") {
            searchProduct(this.$http, this.addressInfo.latitude, this.addressInfo.longitude, this.key, this.offset, this.orderBy).then(
              res => {
                console.log(res.data);
                console.log(res.data.inside["0"].restaurant_with_foods);
                this.restaurants = res.data.inside["0"].restaurant_with_foods;
              },
              res => {
                console.log("search " + this.key + "data fail")
              }
            )
          }
        },
        _loadNewData($state){
          searchProduct(this.$http,this.addressInfo.latitude,this.addressInfo.longitude,this.key,this.offset,this.orderBy).then( (data)=>{
            console.log(data.data.inside["0"].restaurant_with_foods.length);
            if(data.data.inside["0"].restaurant_with_foods.length > 0){
              this.restaurants = this.restaurants.concat(data.data.inside["0"].restaurant_with_foods);
              console.log(this.restaurants);
              this.offset +=15;
              $state.loaded();
            }else{
              $state.complete();
            }
          })
        },
        _backToHome(){
          this.$router.back();
        }
      }
    }
</script>

<style scoped>
  html {
    display: block;
  }
  Style Attribute {
    font-size: 36px;
  }
  html {
    box-sizing: border-box;
    background-color: #f5f5f5;
    color: #333;
    font-family: PingFang SC,Helvetica Neue,Arial,sans-serif;
    line-height: 1.2;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  *, :after, :before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  svg:not(:root), symbol, image, marker, pattern, foreignObject {
    overflow: hidden;
  }

  element.style {
  }
  .app-iYo7n_1 {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    padding: .293333rem .293333rem .293333rem 0;
    padding: 2.933333vw 2.933333vw 2.933333vw 0;
    margin-left: .293333rem;
    margin-left: 2.933333vw;
    background-color: #fff;
    z-index: 101;
  }
  .app-2KdnP_1 {
    height: 100vh;
  }
  .app-3rytA_1 {
    -webkit-align-items: center;
    align-items: center;
    z-index: 101;
    background: #fff;
    z-index: 52;
  }
  .app-3rytA_1, .app-iYo7n_1 {
    display: -webkit-flex;
    display: flex;
    position: relative;
  }
  .app-21LS3_1 {
    width: .933333rem;
    width: 9.333333vw;
    height: .933333rem;
    height: 9.333333vw;
    fill: #999;
    padding: .133333rem .133333rem .133333rem 0;
    padding: 1.333333vw 1.333333vw 1.333333vw 0;
  }
  :not(svg), :not(foreignObject) > svg {
    transform-origin: 0px 0px 0px;
  }
  user agent stylesheet
  form {
    display: block;
    margin-top: 0em;
  }
  Style Attribute {
    font-size: 36px;
  }

  Style Attribute {
    font-size: 32px;
  }

  .app-11zxJ_1 {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    border-radius: .026667rem;
    border-radius: .266667vw;
    -webkit-appearance: none;
    background-color: #f8f8f8;
    padding: .173333rem .4rem .173333rem .88rem;
    padding: 1.733333vw 4vw 1.733333vw 8.8vw;
    font-size: .346667rem;
    color: #666;
  }
  button, input {
    outline: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
  }
  button, input, select, textarea {
    outline: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
  }
  *, :after, :before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  user agent stylesheet
  input[type="search" i] {
    padding: 1px;
  }
  user agent stylesheet
  input[type="search" i] {
    -webkit-appearance: searchfield;
    box-sizing: border-box;
  }
  user agent stylesheet
  input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
  }
  user agent stylesheet
  input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
  }
  user agent stylesheet
  input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
  }
/*<商品展示样式*/
  .app-3GmD-_1 {
    height: calc(100vh - 1.36rem);
    height: calc(100vh - 13.6vw);
  }
  .shop-3SsDF {
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .shop-3XmEa {
    -webkit-flex: 1;
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

</style>
